<template>
  <div class="find-container">
    <van-nav-bar title="发现" />
    <div class="main-box">
      <!-- 面试技巧 -->
      <div class="skill-box">
        <div class="title-box">
          <div class="title">面试技巧</div>
          <div class="arrow-box">
            <span @click="$router.push('/skill')">查看更多</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="skill-list">
          <div class="skill-item" @click="$router.push(`/skilldetail/${item.id}`)" v-for="item in skillList" :key="item.id">
            <div class="content">
              <div class="title">{{ item.title }}</div>
              <div class="info">
                <div class="time">{{ formatTime(item.created_at) }}</div>
                <div class="see">
                  <van-icon name="eye-o" size="17px" /><span>{{
                    item.read
                  }}</span>
                </div>
                <div class="zan">
                  <van-icon
                    name="good-job-o"
                    size="17px"
                    :class="{ active: item.star != 0 }"
                  /><span>{{ item.star }}</span>
                </div>
              </div>
            </div>
            <div class="cover">
              <img :src="baseURL + item.cover" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 市场数据 -->
      <div class="shop-box">
        <div class="title-box">
          <div class="title">市场数据</div>
          <div class="arrow-box">
            <span @click="$router.push('/shopdata')">查看更多</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <span class="tag">上海</span>
        <span class="tag">新媒体运营专员</span>
        <div class="salary-list">
          <div class="salary-item">
            <span>2020年工资</span>
            <div class="process">
              <van-progress
                color="#fe6d67"
                pivot-text="￥7980"
                pivot-color="transparent"
                stroke-width="13"
                :percentage="95"
              />
            </div>
            <div class="percentage">
              <i
                class="iconfont icon-xiangxiajiantoucuxiao"
                style="color: #fe6d67"
              ></i>
              -2%
            </div>
          </div>
          <div class="salary-item">
            <span>2019年工资</span>
            <div class="process">
              <van-progress
                color="#fe6d67"
                pivot-text="￥8119"
                pivot-color="transparent"
                stroke-width="13"
                :percentage="100"
              />
            </div>
            <div class="percentage">
              <i class="iconfont icon-xiangshangjiantoucuxiao"></i>
              4%
            </div>
          </div>
          <div class="salary-item">
            <span>2018年工资</span>
            <div class="process">
              <van-progress
                color="#fe6d67"
                pivot-text="￥7784"
                pivot-color="transparent"
                stroke-width="13"
                :percentage="90"
              />
            </div>
            <div class="percentage">
              <i class="iconfont icon-xiangshangjiantoucuxiao"></i>
              14%
            </div>
          </div>
          <div class="salary-item">
            <span>2017年工资</span>
            <div class="process">
              <van-progress
                color="#fe6d67"
                pivot-text="￥6721"
                pivot-color="transparent"
                stroke-width="13"
                :percentage="80"
              />
            </div>
            <div class="percentage">
              <i class="iconfont icon-xiangshangjiantoucuxiao"></i>
              1%
            </div>
          </div>
          <div v-if="isUp" class="salary-item">
            <span>2016年工资</span>
            <div class="process">
              <van-progress
                color="#fe6d67"
                pivot-text="￥6634"
                pivot-color="transparent"
                stroke-width="13"
                :percentage="75"
              />
            </div>
            <div class="percentage">
              <i class="iconfont icon-xiangshangjiantoucuxiao"></i>
              2%
            </div>
          </div>
          <div v-if="isUp" class="salary-item">
            <span>2015年工资</span>
            <div class="process">
              <van-progress
                color="#fe6d67"
                pivot-text="￥6472"
                pivot-color="transparent"
                stroke-width="13"
                :percentage="70"
              />
            </div>
            <div class="percentage">
              <i
                class="iconfont icon-xiangxiajiantoucuxiao"
                style="color: #fe6d67"
              ></i>
              -15%
            </div>
          </div>
          <div v-if="isUp" class="salary-item">
            <span>2014年工资</span>
            <div class="process">
              <van-progress
                color="#fe6d67"
                pivot-text="￥5713"
                pivot-color="transparent"
                stroke-width="13"
                :percentage="60"
              />
            </div>
            <!-- <div class="percentage">
              <i class="iconfont icon-xiangshangjiantoucuxiao"></i>
              12%
            </div> -->
          </div>
        </div>
        <div class="more">
          <span v-if="isDown" @click="doMore"
            >展开更多<van-icon name="arrow-down"
          /></span>
          <span v-if="isUp" @click="doMore"
            >收起显示<van-icon name="arrow-up"
          /></span>
        </div>
      </div>
      <!-- 分享面经 -->
      <div class="experience-box">
        <div class="title-box">
          <div class="title">面经分享</div>
          <div class="arrow-box">
            <span @click="$router.push('/share')">查看更多</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="experience-list">
          <div @click="$router.push(`/sharedetail/${item.id}`)" v-for="item in shareList" :key="item.id" class="experience-item">
            <div class="exp-title">{{ item.title }}</div>
            <div class="exp-text">{{ item.content }}</div>
            <div class="exp-user">
              <div class="head">
                <img
                  :src="baseURL + item.author.avatar"
                  alt=""
                />
                <span>{{ item.author.nickname }}</span>
              </div>
              <div class="time">
                {{ formatTime(item.created_at) }}
              </div>
              <div class="prev">
                <van-icon name="comment-o" size="17px" /><span>{{
                  item.article_comments
                }}</span>
              </div>
              <div class="zan">
                <van-icon
                  name="good-job-o"
                  size="17px"
                  :class="{ active: item.star != 0 }"
                /><span>{{ item.star }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="height:40px"></div>
    </div>
  </div>
</template>

<script>
import { skillList, experienceList } from '@/api/skill'
export default {
  data () {
    return {
      skillList: [],
      isDown: true,
      isUp: false,
      shareList: []
    }
  },
  methods: {
    async loadSkillList () {
      const res = await skillList()
      this.skillList = res.data.list.slice(0, 3)
      console.log(this.skillList)
    },
    async loadExperienceList () {
      const res = await experienceList()
      console.log(res)
      this.shareList = res.data.list.slice(0, 3)
      console.log(this.shareList)
    },
    formatTime (date) {
      return this.dayjs(date).format('YYYY.MM.DD')
    },
    doMore () {
      this.isDown = !this.isDown
      this.isUp = !this.isUp
    }
  },
  created () {
    this.loadSkillList()
    this.loadExperienceList()
  }
}
</script>

<style lang="less" scoped>
.find-container {
  background-color: #f9f9f9;
  .main-box {
    .skill-box {
      padding: 0 10px;
      background-color: #fff;
      .skill-list {
        .skill-item {
          display: flex;
          padding-bottom: 30px;
          font-size: 16px;
          .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title {
              text-align: left;
            }
            .info {
              color: #b4b4bd;
              font-size: 12px;
              display: flex;
              align-items: center;
              span {
                margin-left: 8px;
              }
              .time {
                flex: 1;
                text-align: left;
              }
              .see {
                display: flex;
                align-items: center;
                margin-right: 25px;
              }
              .zan {
                display: flex;
                align-items: center;
                .active {
                  color: red;
                }
              }
            }
          }
          .cover {
            width: 113px;
            height: 75px;
            margin-left: 20px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .shop-box {
      padding: 0 10px;
      background-color: #fff;
      margin-top: 10px;
      margin-bottom: 10px;
      text-align: left;
      .tag {
        margin-right: 10px;
        display: inline-block;
        padding: 5px;
        border-radius: 4px;
        font-size: 14px;
        color: #545671;
        background-color: #eceaea;
      }
      .salary-list {
        margin-top: 20px;
        .salary-item {
          display: flex;
          align-items: center;
          margin-bottom: 18px;
          span {
            font-size: 14px;
          }
          .process {
            margin-left: 9px;
            margin-right: 9px;
            width: 205px;
            background-color: #ebdfdf;
            border-radius: 7px;
          }
          .percentage {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            .iconfont {
              margin-left: 7px;
              color: #60d183;
              font-weight: 700;
            }
          }
        }
      }
      .more {
        text-align: center;
        padding-bottom: 10px;
        font-size: 14px;
      }
    }
    .experience-box {
      padding: 0 10px;
      background-color: #fff;
      .experience-list {
        .experience-item {
          padding-top: 15px;
          padding-bottom: 20px;
          text-align: left;
          border-bottom: 1px solid #f8f9f9;
          .exp-title {
            font-size: 16px;
            margin-bottom: 7px;
          }
          .exp-text {
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 14px;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .exp-user {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #b4b4bd;
            .head {
              flex: 1;
              display: flex;
              align-items: center;
              img {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 10px;
              }
            }
            .time {
              margin-right: 30px;
            }
            .prev,
            .zan {
              display: flex;
              align-items: center;
              margin-left: 15px;
              .active {
                color: red;
              }
              span {
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
    .title-box {
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      font-size: 18px;
      .arrow-box {
        span {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
